<template>
    <div class="map">
        <button @click="routeLing">路线规划</button>
        <button @click="routeToApp">跳转到APP</button>
        <div id="container"></div> 
        <div id="panel"></div>
    </div>
</template>

<script>
export default {
    name: 'Map',
    props: {
        msg: String
    },
    data(){
        return{
            AMap:"", //高德地图实例
            locationMsg:{},//
            destination:"沙河地铁站"
        }
    },
    mounted(){
        this.initMap();
        // this.routeLing();
    
    },
    methods:{
        // 显示定位
        initMap(){
            this.AMap = new AMap.Map('container');
            var map = this.AMap;
            // 定位
            map.plugin('AMap.Geolocation', ()=> {
            var geolocation = new AMap.Geolocation({
                // 是否使用高精度定位，默认：true
                enableHighAccuracy: true,
                // 设置定位超时时间，默认：无穷大
                timeout: 10000,
                // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
                buttonOffset: new AMap.Pixel(10, 20),
                //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                zoomToAccuracy: true,     
                //  定位按钮的排放位置,  RB表示右下
                buttonPosition: 'RB'
            });
            map.addControl(geolocation)
            geolocation.getCurrentPosition()  //获取当前的位置
            AMap.event.addListener(geolocation, 'complete', (res=>{
                this.locationMsg.addressComponent = res.addressComponent;
                this.locationMsg.formattedAddress = res.formattedAddress;
            })) // data是具体的定位信息
            AMap.event.addListener(geolocation, 'error', err=>console.log(err))// 定位出错

        });
        },
         // 路线规划
        routeLing(){
            var self = this;
            this.AMap.plugin('AMap.Driving', function() {
                var driving = new AMap.Driving({
                    // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
                    policy: AMap.DrivingPolicy.LEAST_TIME,
                    map:self.AMap,
                    panel:"panel",
                })
                console.log(self.locationMsg);
            
                var points = [
                    { keyword: '昌平区沙河镇于辛庄南街',city:'北京' },
                    { keyword: self.destination,city:'北京' },
                ]
                
                driving.search(...points, function (status, result) {
                    // 未出错时，result即是对应的路线规划方案
                    console.log(status,result);
                })
            })
        },

        routeToApp(){
            console.log(123)
        }
    },

}
</script>


<style  scoped lang="scss">
    #container { height: 680px;}  
</style>